<template>
  <div :id="lineChartId"></div>
</template>

<script>
  import echarts from "echarts"

  export default {
    name: "LineChart1",
    data() {
      return {
        option: {
          tooltip: {              //设置tip提示
            trigger: 'axis'
          },
          legend: {               //设置区分（哪条线属于什么）
            show: true
          },
          color: ['#3EB9E9', '#e9482b'],     //每条线是什么颜色，和legend一一对应
          xAxis: {                //设置x轴
            type: 'category',
            boundaryGap: false,     //坐标轴两边不留白
            data: ['1900-00-00'],
            name: '时间',           //X轴 name
            nameTextStyle: {        //坐标轴名称的文字样式
              color: '#999999',
              fontSize: 12,
              padding: [0, 0, 0, 20]
            },
            axisLine: {             //坐标轴轴线相关设置。
              lineStyle: {
                color: '#717171',
              }
            }
          },
          yAxis: {
            name: '人数',
            nameTextStyle: {
              color: '#999999',
              fontSize: 12,
              padding: [0, 0, 10, 0]
            },
            axisLine: {
              lineStyle: {
                color: '#717171',
              }
            },
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: [
            {
              name: '',
              data: [0],
              type: 'line',               // 类型为折线图
              lineStyle: {                // 线条样式 => 必须使用normal属性
                normal: {
                  color: '#3EB9E9'
                }
              },
            },
            {
              name: '',
              data: [0],
              type: 'line',               // 类型为折线图
              lineStyle: {                // 线条样式 => 必须使用normal属性
                normal: {
                  color: '#e9482b'
                }
              },
            }
          ]
        }
      }
    },
    computed: {
      lineChartId() {
        return `lineChart${this._uid}`
      }
    },
    mounted() {
      this.lineChart = echarts.init(document.getElementById(`${this.lineChartId}`), null, {renderer: 'svg'})
    }
  }
</script>

<style scoped>

</style>
